<script lang="ts" setup name="IFrame">
import { propTypes } from '@/utils/propTypes'

const props = defineProps({
  src: propTypes.string.def('')
})
const loading = ref(true)
const frameRef = ref<HTMLElement | null>(null)
const init = () => {
  nextTick(() => {
    loading.value = true
    if (!frameRef.value) return
    frameRef.value.onload = () => {
      loading.value = false
    }
  })
}

watch(
  () => props.src,
  () => {
    init()
  }
)

onMounted(() => {
  init()
})
</script>
<template>
  <div v-loading="loading" class="iframe-wrap">
    <iframe ref="frameRef" :src="props.src" frameborder="no" scrolling="auto" height="100%" width="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" />
  </div>
</template>

<style scoped lang="scss">
.iframe-wrap{
  display: flex;
  flex: 1;
  overflow: hidden;
}
</style>
